<template>
  <div class="system-buy-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-icon">
          <Icon icon="ep:shopping-bag" />
        </div>
        <div class="header-info">
          <h1 class="page-title">套餐商城</h1>
          <p class="page-subtitle">选择适合您的套餐方案，提升业务效率</p>
        </div>
      </div>
      <div class="header-decoration"></div>
    </div>

    <!-- 员工套餐 -->
    <ContentWrap class="package-section personal-section">
      <template #title>
        <div class="section-header">
          <div class="section-icon personal-icon">
            <Icon icon="ep:user" />
          </div>
          <div class="section-info">
            <h2 class="section-title">员工套餐</h2>
            <p class="section-subtitle">为个人用户量身定制的专业套餐</p>
          </div>
        </div>
      </template>

      <div class="packages-grid">
        <div v-for="item in personalList" :key="item.id" class="package-card personal-card">
          <div class="card-header personal-header">
            <div class="package-info">
              <h3 class="package-name">{{ item.name }}</h3>
              <div class="package-stats">
                <Icon icon="ep:trophy" class="stats-icon" />
                <span class="sales-count">已售 {{ item.saleCount }}{{ item.unit }}</span>
              </div>
            </div>
            <div class="package-action">
              <button
                @click="getProductSpec(item.type, item.id, item.name)"
                class="buy-btn personal-btn"
              >
                <Icon icon="ep:shopping-cart" class="btn-icon" />
                <span>选购</span>
              </button>
            </div>
          </div>

          <div class="card-body">
            <div class="package-details">
              <div class="detail-item">
                <div class="detail-icon">
                  <Icon icon="ep:truck" />
                </div>
                <div class="detail-content">
                  <span class="detail-label">发货方式</span>
                  <span class="detail-value">{{
                    item.deliveryType == 1 ? '虚拟发货' : '物流发货'
                  }}</span>
                </div>
              </div>

              <div class="detail-item">
                <div class="detail-icon">
                  <Icon icon="ep:document" />
                </div>
                <div class="detail-content">
                  <span class="detail-label">套餐介绍</span>
                  <span class="detail-value">{{ item.remark }}</span>
                </div>
              </div>
            </div>

            <div class="package-features">
              <div class="feature-tag personal-tag">
                <Icon icon="ep:star" />
                <span>个人专享</span>
              </div>
              <div class="feature-tag">
                <Icon icon="ep:check" />
                <span>即时开通</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ContentWrap>

    <!-- 企业套餐 -->
    <ContentWrap class="package-section enterprise-section">
      <template #title>
        <div class="section-header">
          <div class="section-icon enterprise-icon">
            <Icon icon="ep:office-building" />
          </div>
          <div class="section-info">
            <h2 class="section-title">企业套餐</h2>
            <p class="section-subtitle">为企业用户打造的全方位解决方案</p>
          </div>
        </div>
      </template>

      <div class="packages-grid">
        <div v-for="item in enterpriseList" :key="item.id" class="package-card enterprise-card">
          <div class="card-header enterprise-header">
            <div class="package-info">
              <h3 class="package-name">{{ item.name }}</h3>
              <div class="package-stats">
                <Icon icon="ep:trophy" class="stats-icon" />
                <span class="sales-count">已售 {{ item.saleCount }}{{ item.unit }}</span>
              </div>
            </div>
            <div class="package-action">
              <button
                @click="getProductSpec(item.type, item.id, item.name)"
                class="buy-btn enterprise-btn"
              >
                <Icon icon="ep:shopping-cart" class="btn-icon" />
                <span>选购</span>
              </button>
            </div>
          </div>

          <div class="card-body">
            <div class="package-details">
              <div class="detail-item">
                <div class="detail-icon">
                  <Icon icon="ep:truck" />
                </div>
                <div class="detail-content">
                  <span class="detail-label">发货方式</span>
                  <span class="detail-value">{{
                    item.deliveryType == 1 ? '虚拟发货' : '物流发货'
                  }}</span>
                </div>
              </div>

              <div class="detail-item">
                <div class="detail-icon">
                  <Icon icon="ep:document" />
                </div>
                <div class="detail-content">
                  <span class="detail-label">套餐介绍</span>
                  <span class="detail-value">{{ item.remark }}</span>
                </div>
              </div>
            </div>

            <div class="package-features">
              <div class="feature-tag enterprise-tag">
                <Icon icon="ep:office-building" />
                <span>企业专享</span>
              </div>
              <div class="feature-tag">
                <Icon icon="ep:check" />
                <span>专业服务</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ContentWrap>

    <!-- 空状态 -->
    <div v-if="!personalList.length && !enterpriseList.length" class="empty-state">
      <div class="empty-icon">
        <Icon icon="ep:box" />
      </div>
      <h3 class="empty-title">暂无套餐</h3>
      <p class="empty-description">当前没有可用的套餐，请稍后再试</p>
    </div>
  </div>

  <SkuFormDialog ref="skuFormDialogRef" />
</template>

<script setup lang="ts">
import SkuFormDialog from '@/components/SkuFormDialog/index.vue'
import { getProductList as getProductListApi } from '@/api/system/product'

defineOptions({ name: 'SystemBuy' })

// 响应式数据
const personalList = ref([])
const enterpriseList = ref([])
const loading = ref(false)
const skuFormDialogRef = ref()

// 获取套餐列表
const getProductList = async () => {
  loading.value = true
  try {
    const list = await getProductListApi()
    if (list.length) {
      personalList.value = list.filter((item) => item.type == 1)
      enterpriseList.value = list.filter((item) => item.type == 2 && item.code != 'wallet')
    }
  } catch (error) {
    console.error('获取套餐列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 选择套餐规格
const getProductSpec = (type: number, productId?: number, name: string) => {
  skuFormDialogRef.value.open(type, null, productId, null)
}

// 页面初始化
onMounted(() => {
  getProductList()
})
</script>

<style lang="scss" scoped>
.system-buy-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #97a5e2 0%, #7db5db 100%);
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  color: white;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>')
      repeat;
    pointer-events: none;
  }
}

.header-content {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.header-icon {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.header-info {
  flex: 1;
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-subtitle {
  font-size: 16px;
  margin: 0;
  opacity: 0.9;
}

.header-decoration {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  border-radius: 50%;
}

/* 套餐区域 */
.package-section {
  margin-bottom: 32px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  overflow: hidden;

  :deep(.el-card__header) {
    background: transparent;
    border-bottom: none;
    padding: 24px 24px 0;
  }

  :deep(.el-card__body) {
    padding: 0 24px 24px;
  }
}

.section-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.section-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.personal-icon {
  background: linear-gradient(135deg, #0ba360 0%, #3cba92 100%);
}

.enterprise-icon {
  background: linear-gradient(135deg, #4481eb 0%, #04befe 100%);
}

.section-info {
  flex: 1;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.section-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

/* 套餐网格 */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

/* 套餐卡片 */
.package-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: all 0.3s ease;
  }

  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  }
}

.personal-card {
  &::before {
    background: linear-gradient(90deg, #0ba360 0%, #3cba92 100%);
  }

  &:hover {
    border-color: rgba(11, 163, 96, 0.3);
  }
}

.enterprise-card {
  &::before {
    background: linear-gradient(90deg, #4481eb 0%, #04befe 100%);
  }

  &:hover {
    border-color: rgba(68, 129, 235, 0.3);
  }
}

/* 卡片头部 */
.card-header {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
  }
}

.personal-header {
  background: linear-gradient(135deg, rgba(11, 163, 96, 0.05) 0%, rgba(60, 186, 146, 0.02) 100%);
}

.enterprise-header {
  background: linear-gradient(135deg, rgba(68, 129, 235, 0.05) 0%, rgba(4, 190, 254, 0.02) 100%);
}

.package-info {
  flex: 1;
}

.package-name {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 12px 0;
}

.package-stats {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stats-icon {
  color: #f59e0b;
  font-size: 14px;
}

.sales-count {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

.package-action {
  margin-left: 16px;
}

/* 购买按钮 */
.buy-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }

  &:active {
    transform: translateY(0);
  }
}

.personal-btn {
  background: linear-gradient(135deg, #0ba360 0%, #3cba92 100%);
  color: white;

  &:hover {
    background: linear-gradient(135deg, #3cba92 0%, #0ba360 100%);
  }
}

.enterprise-btn {
  background: linear-gradient(135deg, #4481eb 0%, #04befe 100%);
  color: white;

  &:hover {
    background: linear-gradient(135deg, #04befe 0%, #4481eb 100%);
  }
}

.btn-icon {
  font-size: 16px;
}

/* 卡片主体 */
.card-body {
  padding: 0 24px 24px;
}

.package-details {
  padding-top: 10px;
  margin-bottom: 20px;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }
}

.detail-icon {
  width: 32px;
  height: 32px;
  background: rgba(0, 82, 204, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0052cc;
  font-size: 14px;
  flex-shrink: 0;
}

.detail-content {
  flex: 1;
  min-width: 0;
}

.detail-label {
  display: block;
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 2px;
  font-weight: 500;
}

.detail-value {
  display: block;
  font-size: 14px;
  color: #374151;
  font-weight: 500;
  line-height: 1.4;
  word-break: break-word;
}

/* 功能标签 */
.package-features {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.feature-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(0, 82, 204, 0.1);
  color: #0052cc;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(0, 82, 204, 0.2);
}

.personal-tag {
  background: rgba(11, 163, 96, 0.1);
  color: #0ba360;
  border-color: rgba(11, 163, 96, 0.2);
}

.enterprise-tag {
  background: rgba(68, 129, 235, 0.1);
  color: #4481eb;
  border-color: rgba(68, 129, 235, 0.2);
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

.empty-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #9ca3af;
  margin: 0 auto 20px;
}

.empty-title {
  font-size: 20px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 8px 0;
}

.empty-description {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .packages-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .system-buy-container {
    padding: 12px;
  }

  .page-header {
    padding: 24px;
    margin-bottom: 20px;
  }

  .header-content {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .page-title {
    font-size: 24px;
  }

  .packages-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .package-action {
    margin-left: 0;
    width: 100%;
  }

  .buy-btn {
    width: 100%;
    justify-content: center;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .package-card {
    margin: 0 -8px;
  }

  .card-header,
  .card-body {
    padding: 16px;
  }

  .package-features {
    justify-content: center;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .system-buy-container {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  }

  .package-section {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .package-card {
    background: #374151;
    border-color: rgba(255, 255, 255, 0.1);
  }

  .section-title,
  .package-name {
    color: #f9fafb;
  }

  .section-subtitle,
  .sales-count {
    color: #d1d5db;
  }

  .detail-value {
    color: #e5e7eb;
  }

  .detail-label {
    color: #9ca3af;
  }

  .empty-state {
    background: rgba(30, 41, 59, 0.8);
  }

  .empty-title {
    color: #f9fafb;
  }

  .empty-description {
    color: #d1d5db;
  }
}
</style>
